import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'


// 这边使用react v5版本
// 登陆成功后跳转到后台
class Login extends React.Component{

    handleLogin = () => {
        // 编程式思想实现导航栏,点击登陆按钮，即跳转
        this.props.history.push('/home')
    }

    render() {
        return (
            <div>
                <p>登陆页面</p>
                <button onClick={this.handleLogin}>登陆</button>
            </div>
        )
    }
}

const Home = (props) => {
    const handleBack = () => {
        // go(-1)返回上一个页面
        props.history.go(-1)
    }
    return (
        <div>
            <h2>我是后台首页</h2>
            <button onClick={handleBack}>返回登陆页面</button>
        </div>
    )
}

    

const App = () => (
    <Router>
        <div>
            <h1>编程式导航：</h1>
            <Link to='/login'>去登陆</Link>
            <Route path='/login' component={Login}></Route>
            <Route path='/home' component={Home}></Route>
        </div>
    </Router>
)

ReactDOM.render(<App />, document.getElementById('root'))
